/*
 *@description:我的页面
 *@Author:@rennan
 *@Date:2023-12-26 16:56:11
 *@version: V1.0.0
*/

<template>
  <div class="my_box">
    <!-- 头部布局 -->
    <div class="top">
      <div class="top_bg"></div>
      <div class="top_user">
        <div class="user_img">
          <img src="" alt="">
        </div>
        <div class="name">{{ username }}</div>
        <div class="user_price">
          <div class="price_item">
            <div class="price_total">账户余额</div>
            <div class="price">{{ price }}</div>
          </div>
          <div class="chongzhi">
            <van-button round block type="info" native-type="submit">充值</van-button>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <!-- 常用地址 -->
      <van-cell is-link title="常用地址" @click="addressClick" />
      <!-- 联系我们 -->
      <!-- <div>
        <div><van-icon name="service-o" /></div>
        <van-cell is-link title="联系我们" @click="addressClick" />
      </div> -->
      <van-cell is-link title="联系我们" @click="callClick" />
    </div>
    <div class="bottom">
      <!-- 退出登录按钮 -->
      <van-button round block type="info" @clik="logout">退出登录</van-button>
    </div>
  </div>
</template>
<script>
import utils from '@/utils';
import { Dialog } from 'vant';
export default {
  data() {
    return {
      username: 'admin1',
      price: 2000
    }
  },
  methods: {
    addressClick() {
      this.$router.push('/main/address')
    },
    callClick() {
      console.log('call');
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        this.$router.push('/')
        setTimeout(() => {
          utils.removeToken('tk')
        }, 1000);
      } else {
        done();
      }
    },
    logout() {
      Dialog.confirm({
        message: '是否确认退出?',
        beforeClose,
      });
      console.log(111);
      // 退出登录，清除token 并跳转到login页面
    }
  }
}
</script>
<style scoped>
.top .top_bg {
  height: 180px;
  background-image: linear-gradient(90deg, #ff5f6d, #ffc371);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.top .top_user {
  width: 90%;
  height: 180px;
  background-color: #fff;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .8;
  box-shadow: 0 0 10px #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 0 1em;
}

.top_user .user_img {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  background-color: #ff5f6d;
}

.top_user .name {
  margin-top: 18%;
  margin-bottom: 10%;
  text-align: center;
}

.user_price {
  display: flex;
  justify-content: space-around;
}

.price_item .price_total {
  font-size: 16px;
  color: #999;
}

.price_item .price {
  color: #ff5f6d;
  font-size: 22px;
  margin-top: 10px
}

.center {
  width: 95%;
  margin: 35% auto;
  box-shadow: 4px 4px 4px 0 rgba(158, 117, 255, .2);
  border-radius: 5%;
}

.bottom {
  width: 55%;
  margin-left: 25%;
}

.van-button {
  background: linear-gradient(to right, rgb(255, 144, 104), rgb(255, 75, 31));
  border: none;
  margin-top: 5px;
}
</style>